<template>
	<view class="phxx-item">
		<view class="phxx-item-content">
			<view class="bottom">
				<view class="items">
					<text class="til">账号:</text>
					<input class="val" :value="itemList.account" disabled/>
				</view>
        <view class="items">
          <view class="til"><span style="color:red;">*</span>原始密码:</view>
          <input class="val" v-model="itemList.originalPwd" placeholder="请输入6-16位原始密码" maxlength="16" :password="showOriginalPwd" />
          <image style="height: 25px;width: 30px" @click="toggleShowOriginalPwd" :src="showOriginalPwd ? '/static/images/tabbar/noeye.png' : '/static/images/tabbar/eye.png'" />
        </view>
				<view class="items">
          <view class="til"><span style="color:red;">*</span>新密码:</view>
					<input class="val" v-model="itemList.newPwd" placeholder="请输入6-16位新密码" maxlength="16" :password="showNewPwd"/>
          <image style="height: 25px;width: 30px" @click="toggleShowNewPwd" :src="showNewPwd ? '/static/images/tabbar/noeye.png' : '/static/images/tabbar/eye.png'" />
				</view>
				<view class="items">
          <view class="til"><span style="color:red;">*</span>确认密码:</view>
					<input class="val" v-model="itemList.againPwd" placeholder="请输入6-16位确认密码" maxlength="16" :password="showAgainPwd"/>
          <image style="height: 25px;width: 30px" @click="toggleShowAgainPwd" :src="showAgainPwd ? '/static/images/tabbar/noeye.png' : '/static/images/tabbar/eye.png'" />
				</view>
        <view class="error" v-if="passwordMismatch"><span style="color:red;">确认密码与新密码不一致，请重新输入</span></view>
        <view class="btns">
          <button type="primary" @click="handleClick">提 交</button>
        </view>
			</view>
		</view>
	</view>
</template>

<script>
import { toast } from '@/utils/common';
import { editPwd } from '@/api/login.js';
export default {
	data() {
		return {
			itemList: {
				account: this.$store.state.user.name,
				originalPwd: undefined,
				newPwd: undefined,
				againPwd: undefined,
			},
      passwordMismatch: false,
      showOriginalPwd: true,
      showNewPwd: true,
      showAgainPwd: true,
		};
	},
	methods: {
    toggleShowOriginalPwd() {
      this.showOriginalPwd = !this.showOriginalPwd;
    },
    toggleShowNewPwd() {
      this.showNewPwd = !this.showNewPwd;
    },
    toggleShowAgainPwd() {
      this.showAgainPwd = !this.showAgainPwd;
    },
    validatePasswords() {
      const { originalPwd, newPwd, againPwd } = this.itemList;

      const validLength = pwd => pwd.length >= 6 && pwd.length <= 16;
      // const validFormat = pwd => /^[a-zA-Z0-9]{6,16}$/.test(pwd);

      if (!originalPwd || !validLength(originalPwd)){
        toast('请输入6-16位原始密码');
        return false;
      }
      if (!newPwd || !validLength(newPwd)){
        toast('请输入6-16位新密码');
        return false;
      }
      if (!againPwd || !validLength(againPwd)){
        toast('请输入6-16位确认密码');
        return false;
      }
      // if (!validLength(originalPwd) || !validLength(newPwd) || !validLength(againPwd)) {
      //   toast('请输入6-16位密码');
      //   return false;
      // }
      // if (!validFormat(originalPwd) || !validFormat(newPwd) || !validFormat(againPwd)) {
      //   toast('密码只能包含字母和数字');
      //   return false;
      // }

      if (newPwd !== againPwd) {
        this.passwordMismatch = true;
        return false;
      }

      // 验证通过
      this.passwordMismatch = false;
      return true;
    },
    async handleClick() {
      if (this.validatePasswords()) {
        let data = {
          'oldPassword': String(this.itemList.originalPwd),
          'password': String(this.itemList.newPwd),
        }
        let res = await editPwd(data);
        if(res.code == 0){
          toast('修改密码成功')
          setTimeout(()=>{
            this.$tab.reLaunch('/pages/mine/index');
          },1000)
        }else{
          toast(res.msg)
        }
      }
    },
	}
};
</script>

<style lang="scss" scoped>
.phxx-item {
	width: 700rpx;
	padding: 10rpx 30rpx;
	box-sizing: border-box;
	margin: 20rpx auto 20rpx auto;
	border-radius: 20rpx;
	background: #fff;
	font-size: 26.66rpx;
	color: #000;
	.phxx-item-content {
		width: 644rpx;
		.bottom{
			padding: 10rpx 0 0 0;
			> .items{
				padding-bottom: 6rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #ccc;
				padding-top: 15px;
			}
			.btns{
				button{
					width: 100%;
					height: 40px!important;
					margin-top: 50px;
					line-height: 40px!important;
          background-color: #409eff;
				}
			}
			.til {
				width: 25%;
				display: inline-block;
			}
			.val {
				margin-left: 30rpx;
				width: 75%;
				display: inline-block;
				border-radius: 5px;
				height: 30px;
			}
		}
	}
}
</style>
